<template>
    <div class="app-container">
        <div class="filter-container">
            <el-button type="primary" class="filter-item" icon="el-icon-plus" @click="hadleAdd">添加</el-button>
            <el-input v-model="listQuery.cname" placeholder="中文名" clearable style="width: 200px;" class="filter-item" />
            <el-input v-model="listQuery.ename" placeholder="英文名" clearable style="width: 200px;" class="filter-item" />
            <el-select v-model="listQuery.type" placeholder="类型" clearable style="width: 200px" class="filter-item">
                <el-option v-for="item in typeArr" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
                查询
            </el-button>
        </div>
        <el-table :data="tableData" ref="dragTable" v-loading="listLoading" row-key="id" border fit
            highlight-current-row style="width: 100%">
            <el-table-column prop="id" label="ID" align="center" width="80" />
            <el-table-column label="项目信息" align="center">
                <el-table-column prop="cname" label="中文名" align="center">
                    <template slot-scope="{row}">
                        <span v-copy="{ text: row.cname }" style="cursor: pointer;">
                            {{ row.cname }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="cname" label="英文名" align="center">
                    <template slot-scope="{row}">
                        <span v-copy="{ text: row.ename }" style="cursor: pointer;">
                            {{ row.ename }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="actNum" label="账号" align="center">
                    <template slot-scope="{row}">
                        <span v-copy="{ text: row.actNum }" style="cursor: pointer;">
                            {{ row.actNum }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="pass" label="密码" align="center">
                    <template slot-scope="{row}">
                        <span v-copy="{ text: row.pass }" style="cursor: pointer;">
                            {{ row.pass }}
                        </span>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column prop="gitUrl" label="项目地址" align="center">
                <template slot-scope="{row}">
                    <el-popover placement="top-start" trigger="hover" :content="row.gitUrl">
                        <span slot="reference" class="text" v-copy="{ text: row.gitUrl }">
                            {{ row.gitUrl }}
                        </span>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="lanhu" label="蓝湖" align="center">
                <template slot-scope="{row}">
                    <el-popover placement="top-start" trigger="hover" :content="row.lanhu">
                        <span slot="reference" class="text" v-copy="{ text: row.lanhu }">
                            {{ row.lanhu }}
                        </span>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="apiUrl" label="接口文档" align="center">
                <template slot-scope="{row}">
                    <el-popover placement="top-start" trigger="hover" :content="row.apiUrl">
                        <span slot="reference" class="text" v-copy="{ text: row.apiUrl }">
                            {{ row.apiUrl }}
                        </span>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" align="center">
                <template slot-scope="{row}">
                    {{ getTypeName(row.type) }}
                </template>
            </el-table-column>
            <el-table-column prop="prototype" label="原型地址" align="center">
                <template slot-scope="{row}">
                    <el-popover placement="top-start" trigger="hover" :content="row.prototype">
                        <span slot="reference" class="text" v-copy="{ text: row.prototype }">
                            {{ row.prototype }}
                        </span>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="260">
                <template slot-scope="{row}">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="hadleEdit(row)">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(row)">删除</el-button>
                    <el-button type="success" icon="el-icon-upload2" size="mini"
                        @click="handleRelease(row)">发布</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            @pagination="getList" />
        <!-- 表单 -->
        <el-dialog :title="formName" :visible.sync="dialogFormVisible">
            <el-form :model="form" label-position="left" label-width="120px" label-suffix="：" style="margin-left:50px;">
                <el-form-item label="英文项目名">
                    <el-input v-model="form.ename" :style="{ width: contentWidth }"></el-input>
                </el-form-item>
                <el-form-item label="中文项目名">
                    <el-input v-model="form.cname" :style="{ width: contentWidth }"></el-input>
                </el-form-item>
                <el-form-item label="账号">
                    <el-input v-model="form.actNum" :style="{ width: contentWidth }"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.pass" :style="{ width: contentWidth }"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="form.type" placeholder="请选择类型" :style="{ width: contentWidth }">
                        <el-option v-for="item in typeArr" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="项目地址">
                    <el-input v-model="form.gitUrl" :style="{ width: contentWidth }"></el-input>
                </el-form-item>
                <el-form-item label="蓝湖">
                    <el-input v-model="form.lanhu" :style="{ width: contentWidth }"></el-input>
                </el-form-item>
                <el-form-item label="接口文档">
                    <el-input v-model="form.apiUrl" :style="{ width: contentWidth }"></el-input>
                </el-form-item>
                <el-form-item label="原型地址">
                    <el-input v-model="form.prototype" :style="{ width: contentWidth }"></el-input>
                </el-form-item>
                <el-form-item label="发布地址">
                    <el-input v-model="form.release" :style="{ width: contentWidth }"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleForm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { projectList, projectAdd, projectEdit, projectDelete } from '@/utils/data'
import Pagination from '@/components/Pagination'
export default {
    name: '',
    components: { Pagination },
    data() {
        return {
            typeArr: [
                { id: 1, name: '后台' },
                { id: 2, name: '前端' }
            ],
            total: 0,
            listQuery: {
                page: 1,
                limit: 10,
                cname: "",
                ename: "",
                type: '',
            },
            formName: '新增',
            contentWidth: '300px',
            dialogFormVisible: false,
            tableData: [],
            listLoading: false,
            form: {
                id: "",
                cname: "",
                ename: "",
                gitUrl: "",
                lanhu: "",
                apiUrl: "",
                prototype: "",
                pass: "",
                actNum: "",
                type: '1',
                release: '',
            }
        }
    },
    watch: {},
    computed: {},
    created() {
        this.getList()
    },
    mounted() { },
    methods: {
        // 过滤
        handleFilter() {
            this.getList()
        },
        // 状态name
        getTypeName(id) {
            let obj = this.typeArr.find(item => item.id == id)
            if (obj && obj.name) {
                return obj.name
            }
            return '--'
        },
        // 列表
        getList() {
            projectList(this.listQuery).then(res => {
                console.log(res, '数据');

                this.tableData = res.data
                this.total = res.total
            })
        },
        // 编辑
        hadleEdit(row) {
            this.formName = '编辑'
            this.dialogFormVisible = true
            this.form = Object.assign({}, row)
        },
        // 重置
        resetForm() {
            let formKeys = Object.keys(this.form)
            formKeys.forEach(key => {
                if (key == 'type') {
                    this.form[key] = 1
                } else {
                    this.form[key] = ''
                }
            })
        },
        // 添加
        hadleAdd() {
            this.resetForm()
            this.formName = '新增'
            this.dialogFormVisible = true
        },
        // 提交表单
        handleForm() {
            if (this.formName == '编辑') {
                projectEdit(this.form).then(res => {
                    this.$message.success(res.msg)
                    this.getList()
                }).catch(err => {
                    this.$message.error(err.msg)
                })
            } else {
                projectAdd(this.form).then(res => {
                    this.$message.success(res.msg)
                    this.getList()
                }).catch(err => {
                    this.$message.error(err.msg)
                })
            }
            this.dialogFormVisible = false
        },
        // 删除
        handleDelete(row) {
            this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                projectDelete(row).then(res => {
                    this.$message.success(res.msg)
                    this.getList()
                }).catch(err => {
                    this.$message.error(err.msg)
                })
            })
        },
        // 发布
        handleRelease(row) {
            if (!row.release) {
                this.$message({
                    message: '暂无发布权限',
                    type: 'warning'
                });
                return
            }
            window.open(row.release, '_blank');
        }
    },
}
</script>
<style lang="scss" scoped>
.text {
    cursor: pointer;
    text-align: center;
    margin: 0 auto;
    width: 100px;
    color: blue;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
